<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
  >
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item prop="sysDeptList">
        <cascader-select
          v-model="queryParams.sysDeptList"
          :values="queryParams.sysDeptList"
          varient="energy"
          node-key="id"
          size="small"
          placeholder="用能单位"
          :filterable="true"
        ></cascader-select>
      </el-form-item>
      <el-form-item prop="deviceMonitoringNetworksId">
        <RemoteSelect
          v-model="queryParams.deviceMonitoringNetworksId"
          varient="networks"
          size="small"
          :extraParams="extraParams"
          :propss="{
            label: 'name',
            value: 'id',
          }"
          placeholder="能耗终端"
        ></RemoteSelect>
      </el-form-item>
      <el-form-item prop="energyType">
        <el-select v-model="queryParams.energyType" placeholder="能耗种类">
          <el-option
            v-for="dict in dict.type.energy_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="date">
        <el-date-picker
          v-model="queryParams.date"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="list" border class="mt20" height="660">
      <el-table-column
        prop="deptName"
        label="用能单位"
        width="150"
        show-overflow-tooltip
        align="center"
      ></el-table-column>
      <el-table-column
        prop="statisticTime"
        label="统计月份"
        width="240"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="deviceMonitoringNetworksName"
        label="公共能耗终端"
        min-width="150"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="energyType"
        label="能耗类别"
        min-width="150"
        align="center"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.energy_type"
            :value="scope.row.energyType"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="apportionEnergy"
        label="单位分摊能耗Ti（T * Si/S)"
        min-width="240"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="publicEnergy"
        label="公共能耗总值T"
        min-width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="apportionArea"
        label="单位分摊用能面积Si(Bi * L)"
        min-width="240"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="energyArea"
        label="单位用能面积Bi"
        min-width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="apportionPercent"
        label="分摊能耗比例L（S /B）"
        min-width="220"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="publicArea"
        label="公共面积（m2）"
        min-width="160"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="energyAreaAll"
        label="机关用能总面积B（m2）"
        min-width="220"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="unitEnergy"
        label="本单位能耗（计量单位）"
        min-width="220"
        align="center"
      >
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-sizes="[20, 40, 60, 80]"
      @pagination="getList"
    />
  </lb-layout>
</template>

<script>
import { list } from "@/api/quota/pooled";
import CascaderSelect from "@/components/Select/CascaderSelect";
import RemoteSelect from "@/components/Select/RemoteSelect";

export default {
  name: "pooled",
  dicts: ["energy_type", "target_type"],
  components: { CascaderSelect, RemoteSelect },
  data() {
    return {
      extraParams: { specialEnergyFlag: 3 },
      // 表格树数据
      list: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 24,
        sysDeptList: [],
        deviceMonitoringNetworksId: "",
        energyType: "0",
        date: [],
      },
    };
  },
  created() {
    //默认当月
    let start = this.getStartTime();
    let end = this.getEndTime();
    this.queryParams.date = [start, end];
    this.getList();
  },
  methods: {
    getStartTime() {
      let date = new Date();
      date.setDate(1); // 将当前时间的日期设置成第一天
      let year = date.getFullYear(); // 得到当前年份
      let month = date.getMonth() + 1; // 得到当前月份（0-11月份，+1是当前月份）
      month = month > 10 ? month : "0" + month; // 补零
      let day = date.getDate(); // 得到当前天数，实际是本月第一天，因为前面setDate(1) 设置过了
      return year + "-" + month + "-" + day; // 这里传入的是字符串
    },
    getEndTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      // 这里传入的是整数时间，返回的是下个月的第一天，因为月份是0-11
      let nextMonthFirthDay = new Date(year, month, 1); // 下个月的第一天
      let oneDay = 1000 * 60 * 60 * 24; // 一天的时间毫秒数
      let endDay = new Date(nextMonthFirthDay - oneDay);
      let day = endDay.getDate(); // 本月最后一天
      // 这里传入的是字符串格式的时间，返回的是传入字符串的时间
      return year + "-" + month + "-" + day;
    },
    /** 查询列表 */
    getList() {
      let that = this;
      const { date } = this.queryParams;
      const [statisticStartTime, statisticEndTime] = date || [];
      const data = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        statisticStartTime: statisticStartTime
          ? statisticStartTime + " 00:00:00"
          : "",
        statisticEndTime: statisticEndTime
          ? statisticEndTime + " 23:59:59"
          : "",
        energyType: this.queryParams.energyType,
        deviceMonitoringNetworksId: this.queryParams.deviceMonitoringNetworksId,
        sysDeptId:
          this.queryParams.sysDeptList[this.queryParams.sysDeptList.length - 1],
      };
      that.$store.commit("app/updateApiCount", "add");
      list(data)
        .then((res) => {
          that.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.list = res.rows;
          this.total = res.total;
        })
        .catch((err) => {
          that.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!300211");
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
